<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Trinty Desktop Shell</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Java Shell.">
		<meta name="author" content="Erik De Rijcke">
		<!-- Bootstrap -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/docs.css" rel="stylesheet">
    <!-- Pretty print-->
    <link href="assets/css/prettify.css" type="text/css" rel="stylesheet" />
	</head>
	<body onload="prettyPrint()" bgcolor="white" data-spy="scroll" data-target=".docs-sidebar">
		<div class="navbar navbar-fixed-top navbar-inverse">
  		<div class="navbar-inner">
  			<div class="container-fluid">

  				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        		<span class="icon-bar"></span>
        		<span class="icon-bar"></span>
        		<span class="icon-bar"></span>
      		</a>

    			<a class="brand" href="./index.html">Trinity Shell</a>
    			<div class="nav-collapse">
    				<ul class="nav">
      				<li class="active"><a href="./developer.html">/Developer</a></li>
      				<li><a href="./user.html">/User</a></li>
      				<li><a href="./download.html">/Download</a></li>
      				<li><a href="./about.html">/About</a></li>
    				</ul>
    			</div>
  			</div>
  		</div>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
      		<!--Sidebar content-->
          <div class="span2 docs-sidebar ">
            <div class="well well-small well-fixed">
              <ul class="breadcrumb">
                <li><span class="divider">/</span><a href="./developer.html">Developer</a></li>
                <li> <span class="divider">/</span><a href="./resource.html">Resource</a></li>
                <li class="active"><span class="divider">/</span>QGraphicsView</li>
              </ul>
            <ul class="nav nav-list docs-sidenav">
              <li><a href="#Disclaimer"><i class="icon-chevron-right"></i> Disclaimer</a></li>
              <li><a href="#Intro"><i class="icon-chevron-right"></i> Intro</a></li>
              <li><a href="#Example"><i class="icon-chevron-right"></i> A Code Example</a></li>
            </ul>
            </div>
          </div>

    			<div class="span10">
      				<!--Body content-->
            <section id="Disclaimer">
      				<div class="page-header" >
      					<h2>Disclaimer</h2>
      				</div>
              <p>
                The information on this page was copied from <a href="http://web.archive.org/web/20100410000102/http://fredyduarte.net/blog/?p=110">here</a>. Reformatted and prettified. It handles the basic idea of how a <a href="http://doc.qt.digia.com/qt/qgraphicsitem.html"><code>QGraphicsItem</code></a> works. The code examples are in C++ but should be straightforward in any language.
              </p>
            </section>
            <section id="Intro">
              <div class="page-header">
                <h2>Intro</h2>
              </div>
              <p>
                Last time, I gave an introduction to the <a href="http://doc.qt.digia.com/qt/qgraphicsview.html"><code>QGraphicsView</code></a> Framework. Now, I’ll show you how to create <a href="http://doc.qt.digia.com/qt/qgraphicsitem.html"><code>QGraphicsItem</code></a>s in a scene.
              </p>
              <p>
                First, you need to understand the Coordinate System. There are 3 coordinate systems in use with the framework: View coordinates, Scene coordinates and Item coordinates.
                <ol>
                  <li>The View coordinate system: represents the QGraphicsView widget coordinates. Each unit in this system corresponds to one pixel on the screen.</li>
                  <li>The Scene coordinate system: represents logical units of a QGraphicsScene. Top-level items on the scene are positioned using this system before mapping to the View.</li>
                  <li>The Item coordinate system: represents the QGraphicsItem local coordinates. These coordinates are centered (by default) around the Item’s (0, 0) point.</li>
                </ol>
              </p>
              <p>
                Two example scenarios are demonstrated below:
              </p>
              <p>
                <img src="assets/img/devresource/coordinate-system2.png" class="img-polaroid">
              </p>
              <P>
                The picture on the LEFT shows a sample <a href="http://doc.qt.digia.com/qt/qgraphicsscene.html"><code>QGraphicsScene</code></a> visualized by an untransformed <a href="http://doc.qt.digia.com/qt/qgraphicsview.html"><code>QGraphicsView</code></a>. The picture on the RIGHT shows the same <a href="http://doc.qt.digia.com/qt/qgraphicsscene.html"><code>QGraphicsScene</code></a>, but the <a href="http://doc.qt.digia.com/qt/qgraphicsview.html"><code>QGraphicsView</code></a> is changed. It has a ZOOM OUT operation applied to it.
              </P>
              <p>
                Notice that each logical unit on the RIGHT scene does not represent a pixel on the screen anymore. However, each item remains with the SAME coordinates and <a href="http://doc.qt.digia.com/qt/qgraphicsitem.html#boundingRect">bounding rectangle</a>s.
              </p>
            </section>
            <section id="Example">
              <div class="page-header">
                <h2>A Code Example</h2>
              </div>
              <p>
                Now, let’s do some coding. First, we add a rectangle and a circle to the scene:
              </p>
              <p>
                <pre class="prettyprint linenums">QGraphicsScene scene(0, 0, 240, 120);
 
QGraphicsRectItem *rect;
rect = new QGraphicsRectItem(QRect(0, 0, 100, 100));
rect->setBrush( Qt::red );
rect->setPos(10, 10);
 
scene.addItem(rect);
 
QGraphicsEllipseItem *circle;
circle = new QGraphicsEllipseItem(QRect(0, 0, 100, 100));
circle->setBrush( Qt::blue );
circle->setPos(120, 10);
 
scene.addItem(circle);
 
QGraphicsView view(&amp;scene);
 
view.show();</pre>
              </p>
              <p>
                <img src="assets/img/devresource/ex1.png" class="img-polaroid">
              </p>
              <p>
                A rectangle and a circle. No transformations applied.
              </p>
              <p>
                To add both items, the <a href="http://doc.qt.digia.com/qt/qgraphicsscene.html#addItem"><code>addItem</code></a> method was used. Both bounding rectangles start at (0, 0) point, but their scene positions were changed through the <a href="http://doc.qt.digia.com/qt/qgraphicsitem.html#setPos"><code>setPos</code></a> method. You can still use the convenience methods to add items if you want (<a href="http://doc.qt.digia.com/qt/qgraphicsscene.html#addRect"><code>addRect</code></a>, <a href="http://doc.qt.digia.com/qt/qgraphicsscene.html#addEllipse"><code>addEllipse</code></a>, <a href="http://doc.qt.digia.com/qt/qgraphicsscene.html#addPolygon"><code>addPolygon</code></a>, etc).
              </p>
              <p>
                In order to add a third item, we must enlarge the scene to visualize it.
              </p>
              <p>
                <pre class="prettyprint linenums">QGraphicsScene scene(0, 0, 240, 200);</pre>
                <pre class="prettyprint linenums">QPolygonF polygon;
polygon &lt;&lt; QPointF(0, 60) &lt;&lt; QPointF(120, 60)
                          &lt;&lt; QPointF(60, 0);
QGraphicsPolygonItem *triangle;
triangle = new QGraphicsPolygonItem(polygon);
triangle->setBrush( Qt::green );
triangle->setPos(60, 120);
 
scene.addItem(triangle);</pre>
              </p>
              <p>
                <img src="assets/img/devresource/ex2.png" class="img-polaroid">
              </p>
              <p>
                A triangle (<a href="http://doc.qt.digia.com/qt/qgraphicspolygonitem.html"><code>QGraphicsPolygonItem</code></a>) added to the scene.
              </p>
              <p>
                Now, let’s apply some operations to them:
              </p>
              <p>
                <pre class="prettyprint linenums">rect->translate(15, 10);
rect->rotate(10);
 
circle->translate(20, 30);
circle->scale(1/1.5, 1/1.5);
 
triangle->shear(0.85, 0);</pre>
              </p>
              <p>
                <img src="assets/img/devresource/ex3.png" class="img-polaroid">
              </p>
              <p>
                Now the rectangle was moved and rotated (by default Qt sets the transformation center to the scene’s (0,0) point), the circle was moved and scaled (shrinked) and the triangle was sheared. You can learn more about transformations at the <a href="http://doc.qt.digia.com/qt/qgraphicsitem.html"><code>QGraphicsItem</code></a> class.
              </p>
              <p>
                And that’s it. Hope this was usefull!
              </p>
            </section>
    			</div>
			</div>
		</div>

		<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="assets/js/prettify.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
	</body>
</html>